<template>
    <div id="detail">
        <!-- 商品详情上部框 -->
        <van-nav-bar @click-left="onClickLeft" @click-right="showShare = true">
            <template #left>
                <van-icon name="revoke" size="24" color="#000"/>
            </template>
            <template #right>
                <van-icon name="share-o" size="24" color="#000"/>
            </template>
        </van-nav-bar>
        <!-- 弹出 -->
        <van-share-sheet v-model="showShare"
            title="立即分享"
            :options="options"
            @select="onClickRight" />
        <article>
            <!-- 图片轮播 -->
            <van-swipe class="my-swipe" indicator-color="white" width="100%" height="300">
                <van-swipe-item v-for="item in banners" :key="item">
                    <img :src="item" alt="">
                </van-swipe-item>
            </van-swipe>
            <!-- 标题及价格框 -->
            <div class="descBox">
                <span class="title">
                    <van-icon name="hot" color="red"/>
                    {{this.product.title}}
                </span>
                <span class="desc">{{this.product.desc}}</span>
                <span class="price">
                    <span class="icon">￥</span>
                    {{this.product.price}}
                    <span class="tag" v-for="item in icon" :key="item.id">
                        <van-tag plain type="primary" size="media" text-color="red">{{item}}</van-tag>
                    </span>
                </span>
            </div>
            <!-- 地址型号选择 -->
            <div class="address">
                <van-cell>
                    <span class="caption">发货</span>
                    <span class="dispatchDesc">浙江金华 | 快递：免运费</span>
                </van-cell>
                <van-cell is-link @click="guaranteeShowPopup">
                    <span class="caption">保障</span>
                    <span class="guaranteeDesc">假一赔十 · 极速退款 · 七天无理由退换</span>
                </van-cell>
                <van-cell is-link @click="parameterShowPopup">
                    <span class="caption">参数</span>
                    <span class="parameterDesc">产品编号、产地...</span>
                </van-cell>
                <!-- 弹出 -->
                <van-popup class="guarantee" v-model="guaranteeShow" position="bottom" :style="{ height:'50%'}">
                    <van-divider>产品保障</van-divider>
                    <div>
                        <van-icon name="certificate" color="red"/> 
                        <span class="caption">假一赔十</span>
                        <span>正品保障，假一赔十</span>
                    </div>
                    <div>
                        <van-icon name="certificate" color="red"/> 
                        <span class="caption">极速退款</span>
                        <span>满足相应条件时，诚信用户在退货寄出后，享受极速退款到账</span>
                    </div>
                    <div>
                        <van-icon name="certificate" color="red"/> 
                        <span class="caption">七天无理由退换</span>
                        <span>满足相应条件时，消费者可申请“七天无理由退换货”</span>
                    </div>
                </van-popup>
                <van-popup class="parameter" v-model="parameterShow" position="bottom" :style="{ height:'50%'}">
                    <van-divider>产品参数</van-divider>
                    <div>
                        <span class="caption">标题</span>
                        <span>{{this.product.title}}</span>
                    </div>
                    <div>
                        <span class="caption">详细描述</span>
                        <span>{{this.product.desc}}</span>
                    </div>
                    <div>
                        <span class="caption">产地</span>
                        <span>浙江金华</span>
                    </div>
                    <div>
                        <span class="caption">生产厂家</span>
                        <span>浙江金华火腿肠有限公司</span>
                    </div>
                </van-popup>
            </div>
            <!-- 商品详情页面 -->
            <div class="detailBox">
                <van-divider :style="{color:'#000',borderColor:'#000',padding:'0 16px'}">商品详情</van-divider>
                <div class="producrVideo">
                    <video src="https://m4.pptvyun.com/pvod/e11a0/c7LI5qB24M33_QGsPOkaPj4q-Nc/eyJkbCI6MTY0MTk5NDE5OCwiZXMiOjYwNDgwMCwiaWQiOiIwYTJmbXFpZXFhaWZuYTJMNEsyZG9hZmhvYVdpb2EtYW9hT2ciLCJ2IjoiMS4wIn0/0a2fmqieqaifna2L4K2doafhoaWioa-aoaOg.mp4"
                        width="100%" controls>
                    </video>
                </div>
                <div class="imgdetail">
                    <div v-for="item in banners" :key="item.key">
                        <img :src="item" alt="">
                    </div>
                </div>
            </div>
        </article>
        <!-- 商品下部各种按钮 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服"/>
            <van-goods-action-icon icon="cart-o" text="购物车" to="/home/cart"/>
            <van-goods-action-icon icon="star-o" text="收藏"/>
            <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
            <van-goods-action-button type="danger" text="立即购买" @click="onBuyButton"/>
        </van-goods-action>
    </div>
</template>
<script>
    import {detailsApi} from '../../apis/detailApis'
    import {addCartApi} from '../../apis/listApis'
    export default {
        data() {
            return {
                product:{},
                banners:[],
                icon:[],
                showShare: false,
                options: [
                    { name: '微信', icon: 'wechat' },
                    { name: 'QQ', icon: 'qq' },
                    { name: '微博', icon: 'weibo' },
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                ],
                // show: false, //商品详情是否弹出
                guaranteeShow: false, //保障是否弹出
                parameterShow: false, //参数是否弹出
                userId:''
            }
        },
        mounted() {
            this.getDetail()
            this.userId = this.$store.getters['common/userInfo'].id
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1)
            },
            onClickRight(option){
                this.$toast(option.name);
                this.showShare = false;
            },
            async getDetail(){
                let res = await detailsApi({type:this.$route.query.type})
                // console.log(res);
                let idx = Math.floor(Math.random()*2)
                this.product = res.data[idx]
                // this.product = res.data
                this.banners = this.product.banner
                this.icon = this.product.icon
            },
            guaranteeShowPopup(){
                this.guaranteeShow = true
            },
            parameterShowPopup(){
                this.parameterShow = true
            },
            async addCart(){
                let res = await addCartApi({userId:this.userId, price:this.product.price, id:this.product.id, time:new Date(), count: 1,name:this.product.title, detailaddress:'address', bgUrl:this.banners[0]})
                if(res.code ===200) this.$toast('加购成功')
            },
            onBuyButton(){
                // this.$router.push('/order?id='+this.product.id)
                console.log('--------------订单界面待开发');
            }
        }
    }
</script>

<style lang="less" scoped>
    // 抽取弹出框的样式
    .van-popup(@cc:#969696,@cfs:14px,@sfs:12px,@sc:#000){
        div{
            padding: 10px;
            .van-icon{
                padding-right: 10px;
            }
            .caption{
                color: @cc;
                font-size: @cfs;
            }
            span{
                font-size: @sfs;
                padding-right: 15px;
                color: @sc;
            }
        }
    }
    #detail{
        height: 100%;
        .van-nav-bar {
            background: #fafafa;
        }
        article{
            height: calc(100% - 50px - 46px);
            overflow-x: hidden;
            .van-swipe{
                margin: 8px;
                .van-swipe-item{
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .descBox{
                padding: 10px;
                background: #FAFAFA;
                border-radius: 6px;
                margin: 5px;
                .title{
                    display: -webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:1;
                    overflow: hidden;
                    font-size: 18px;
                    margin-bottom: 8px;
                }
                .desc{
                    font-size: 14px;
                    text-indent: 1em;
                    display: -webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:3;
                    overflow: hidden;
                }
                .price{
                    margin: 10px;
                    display: block;
                    color: red;
                    .icon{
                        font-size: 16px;
                    }
                    .tag{
                        padding-left: 5px;
                    }
                }
            }
            .address{
                padding: 10px;
                background: #FAFAFA;
                border-radius: 6px;
                margin: 5px;
                .van-cell{
                    .caption{
                        display: inline-block;
                        color: #969696;
                        padding-right: 15px;
                    }
                }
                .guarantee{
                    .van-popup()
                }
                .parameter{
                    .van-popup(#000, 14px, 12px,#969696)
                }
            }
            .detailBox{
                width: 100%;
                img{
                    width: 100%;
                }
            }
        }
    }
</style>